<template>
	<view class="safe-area-inset-bottom">
		<view class="swip_header">
			<view class="slot-box">
				<view style="width: 100%;">
					<uni-search-bar v-if="tabIndex == 2" v-model="queryParams.name" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入企业名称" />
					<uni-search-bar v-else v-model="queryParams.params.findApi" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入姓名或手机号码" />
				</view>
			</view>
			<view class="swiplist">
				<swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
				<!-- <button size="mini" class="add_btn" @click="handleAdd"><i class="iconfont" style="color: #00a660;">&#xeaf3;</i>新增</span></button> -->
			</view>
		</view>
		
		<!-- 新增弹窗 --> 
		<uni-popup ref="addPopup" background-color="#fff">
			<view class="popup-content">
				<view class="bor_add" @click="addList(1)"><i class="iconfont">&#xe647;</i><span>新增企业客户</span></view>
				<view class="bor_add" @click="addList(2)"><i class="iconfont">&#xe647;</i><span>新增企业信息</span></view>
			</view>
		</uni-popup>
				
		<view class="listSwiperTop">
			<!-- 个人客户 --> 
			<customer-Person v-if="tabIndex == 0" ref="person" :findApi="queryParams.params.findApi"/>
			<!-- 企业客户 -->
			<customer-CompanyStaff v-if="tabIndex == 1" ref="companyStaff" :findApi="queryParams.params.findApi"/>
			<!-- 企业信息 --> 
			<customer-Company v-if="tabIndex == 2" ref="company" :findApi="queryParams.name"/>
		</view>
	</view>
</template>
<script>
	import swiperTabHead from "@/components/slideTab/slideTab"
	import customerPerson from "./customerPerson"
	import customerCompanyStaff from "./customerCompanyStaff"
	import customerCompany from "./customerCompany"
	export default {
		components: {swiperTabHead,customerPerson,customerCompanyStaff,customerCompany},
		data() {
			return {
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  isCertify: null,
				  status: null,
				  name:null,
				  params: {
				    findApi: undefined
				  }
				},      
				tabList: [{
					title: '个人客户'
				}, {
					title: '企业客户'
				}, {
					title: '企业信息'
				}],
				tabIndex: 0,
			}
		},
		/** 上拉刷新回调 */
		onReachBottom() {
		  if (this.tabIndex == 0) {
		    this.$refs.person.loadMore()
		  } else if (this.tabIndex == 1) {
		    this.$refs.companyStaff.loadMore()
		  } else {
		    this.$refs.company.loadMore()
		  }
		},
		methods: {
			/** 搜索 */
			handleQuery(){
				this.$nextTick(()=>{
					if(this.tabIndex == 0){
						this.$refs.person.getList(true)
					}else if(this.tabIndex == 1){
						this.$refs.companyStaff.getList(true)
					}else{
						this.$refs.company.getList(true)
					}
				})
			},
			addList(e){
				if(e == 0){
					uni.navigateTo({
						url:'./personalchangeView?type='+ 0
					})
				}else if(e == 1){
					uni.navigateTo({
						url:'./companyStaffchangeView?type='+ 0
					})
				}else{
					uni.navigateTo({
						url:'./companychangeView?type='+ 0
					})
				}
				this.$refs.addPopup.close()
			},
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
				uni.pageScrollTo({
				    scrollTop: 0,//滚动到页面的目标位置
				    duration: 300
				});
				this.findApi = undefined;
				this.tabIndex = index;
				this.handleQuery()
			},
			/** 新增 */
			handleAdd(){
				this.$refs.addPopup.open('center')
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-select__selector{
		left: 20rpx;
		right: 0;
	}
	
	::v-deep .uni-popup .uni-popup__wrapper{width: 90% !important;padding:30rpx 0;}
	::v-deep .uni-popup-dialog{width: 100%;}
	.bor_add{
		 border: 1rpx dashed #ccc;
		 text-align: center;
		 width: 300rpx;
		 height: 120rpx;
		 line-height: 120rpx;
		 margin:40rpx auto;
		 border-radius:20rpx;
		 color: $uni-color-primary;
		 span{margin-left: 5rpx;}
	}
</style>
